<template>
	<view class="content">
		<view class="header">
			<view class="headerContent flexbetween">
				<view :class="{headerContentItem:true,active:status==1}" @click="status=1,getlist()">坚持天数</view>
				<view :class="{headerContentItem:true,active:status==2}" @click="status=2,getlist()">刷题数量</view>
				<view :class="{headerContentItem:true,active:status==3}" @click="status=3,getlist()">正确率</view>
			</view>
		</view>
		<view class="mypaiming flexbetween">
			<view class="child">
				<view class="txt">我的</view>
				<view class="txt">排名</view>
			</view>
			<view class="child">
				<image :src="info.avatar" mode=""></image>
			</view>
			<view class="child">
				<view class="name">{{info.nickname}}</view>
			</view>
			<view class="child">
				<view class="mingci">第{{info.paihang}}名</view>
			</view>
			<view class="child">
				<view class="line"></view>
			</view>
			<view class="child">
				<view class="jinbi">
					<text v-if="status==1">{{info.tm_day}}天</text>
					<text v-else-if="status==2">{{info.tm_num}}题</text>
					<text v-else>{{info.zqlv}}%</text>
				</view>
			</view>
		</view>
		<view class="totalpm">
			<view class="title flexbetween">
				<view class="flexleft">
					<view class="paiming">排名</view>
					<view class="nicheng">昵称</view>
				</view>
				<view>
					<view class="jinbi" v-if="status==1">天数</view>
					<view class="jinbi" v-else-if="status==2">数量</view>
					<view class="jinbi" v-else>正确率</view>
				</view>
			</view>
			<!-- <view class="kong" style="margin: 260rpx 0;" v-if="list.data.length==0">
				<u-empty mode="data" text="暂无用户数据"></u-empty>
			</view> -->
			<view class="pmdata flexbetween" v-for="(item,index) in list.data" :key="item.id">
				<view class="flexleft">
					<view class="diyim" v-if="index==0"></view>
					<view class="dierm" v-else-if="index==1"></view>
					<view class="disanm" v-else-if="index==2"></view>
					<view class="num" v-else>{{index}}</view>
					<view class="flexleft">
						<view class="img">
							<image :src="item.avatar" mode=""></image>
						</view>
						<view class="name">{{item.nickname}}</view>
					</view>
				</view>
				<text class="jinbinum" v-if="status==1">{{item.num}}天</text>
				<text class="jinbinum" v-else-if="status==2">{{item.num}}题</text>
				<text class="jinbinum" v-else>{{item.num}}%</text>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				list: {
					data: [],
				},
				info: {},
				status: 1
			}
		},
		onLoad() {
			let _this = this;
			_this.getlist();
			// _this.getuserInfo();
		},
		methods: {
			//获取个人信息
			getuserInfo() {
				let _this = this;
				httpRequest.request('/api/user/index', 'POST', {}).then(res => {
					console.log(res);
					if (res.code == 1) {
						_this.info = res.data.userinfo
					}
				})
			},
			getlist(isPage, page) {
				let _this = this;
				httpRequest.request('/api/user/subjectph', 'POST', {
					type: this.status
				}).then(res => {
					if (res.code == 1) {
						this.list.data = res.data.paiming
						res.data.user.avatar = this.$imgUrl + res.data.user.avatar
						this.info = res.data.user
					} else {
						httpRequest.toast(res.msg);
					}
				})
			},
			// onReachBottom() {
			// 	let _this = this;
			// 	let list = _this.list;
			// 	let page = _this.page;
			// 	if (list.total <= page) {
			// 		return false;
			// 	}
			// 	page++;
			// 	_this.page = page;
			// 	_this.getlist(true, page);
			// },
		}
	}
</script>

<style scoped lang="scss">
	.content {
		overflow: hidden;
	}

	.header {
		padding: 30rpx 30rpx 0;

		.headerContent {
			background-color: rgba(241, 241, 241, 1);
			// background-color: red;
			border-radius: 72rpx;
			padding: 7rpx;
			text-align: center;
		}

		.headerContentItem {
			width: 33%;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
		}

		.active {
			width: 33%;
			height: 88rpx;
			line-height: 88rpx;
			background: #DCB490;
			border-radius: 72rpx 72rpx 72rpx 72rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.mypaiming {
		padding-top: 30rpx;
		margin: 30rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.txt {
			color: rgba(220, 180, 144, 1);
			font-size: 32rpx;
		}

		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
		}

		.name {
			color: #000;
			font-size: 26rpx;
		}

		.mingci {
			color: rgba(220, 180, 144, 1);
			font-size: 26rpx;
		}

		.line {
			width: 2rpx;
			height: 50rpx;
			background-color: #E5E5E5;
		}

		.jinbi {
			color: rgba(220, 180, 144, 1);
			font-size: 26rpx;
		}
	}

	.totalpm {
		padding-top: 30rpx;
		margin: 30rpx;
		padding: 30rpx;
		background-color: #fff;

		.title {
			color: #A7AEB7;
			font-size: 26rpx;

			.nicheng {
				margin-left: 60rpx;
			}
		}

		.pmdata {
			padding-top: 30rpx;

			.diyim {
				width: 44rpx;
				height: 60rpx;
				margin: 0 6rpx;
				background-size: 100% 100%;
				background-image: url('../../static/diyim.png');
			}

			.dierm {
				width: 44rpx;
				margin: 0 6rpx;
				height: 60rpx;
				background-size: 100% 100%;
				background-image: url('../../static/dierm.png');
			}

			.disanm {
				width: 44rpx;
				height: 60rpx;
				margin: 0 6rpx;
				background-size: 100% 100%;
				background-image: url('../../static/disanm.png');
			}

			.num {
				color: #000000;
				font-size: 26rpx;
				padding: 0 20rpx;
				text-align: center;
			}

			.img {
				width: 80rpx;
				height: 80rpx;
				margin-left: 40rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.name {
				color: #000000;
				font-size: 26rpx;
				margin-left: 20rpx;
			}

			.jinbinum {
				color: #000000;
				font-size: 26rpx;
			}
		}
	}
</style>